<blockquote class="layui-elem-quote">
  <div class="layui-inline">
    <i class="layui-icon layui-icon-list layui-head-icon"></i>
    <span class="layui-font-16 layui-font-green">首页轮播</span>
  </div>
</blockquote>
<div class="layui-card">
  <div class="layui-card-body">
    <form class="layui-form">
      <input type="hidden" id="store-id" value="{:session('store_id')}">
      <div id="banner">
        {if $list->isEmpty()}
        <div class="item">
          <div class="layui-inline">
            <div class="layui-form-item">
              <div class="layui-input-block">
                <img src="/static/admin/img/upimg.png" class="layui-banner-img image_url">
                <input type="hidden" class="image">
              </div>
            </div>
          </div>

          <div class="layui-inline">
            <div class="layui-form-item">
              <label class="layui-form-label">排序</label>
              <div class="layui-input-inline">
                <input type="number" value="0" lay-verify="required" autocomplete="off"
                       class="layui-input bsort">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">轮播名称</label>
              <div class="layui-input-block">
                <div class="layui-inline">
                  <input type="text" style="width: 500px" required lay-verify="required" placeholder="请输入轮播标题"
                         autocomplete="off"
                         class="layui-input name">
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">跳转规则</label>
              <div class="layui-input-block">
                <div class="layui-inline">
                  <input type="text" disabled class="layui-input param">
                  <input type="hidden" class="type">
                </div>
                <div class="layui-inline">
                  <a class="layui-btn layui-btn-primary layui-border-green choose-goods" data-type="1">选择普通商品</a>
                </div>
                <div class="layui-inline">
                  <a class="layui-btn layui-btn-primary layui-border-green choose-group-activity" data-type="2">选择拼团活动</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        {else/}
        {foreach $list as $k => $vo}
        <div class="item">
          <input type="hidden" class="id" value="{$vo.id}">
          <div class="layui-inline">
            <div class="layui-form-item">
              <div class="layui-input-block">
                <img src="{$vo.image}" class="layui-banner-img image_url">
                <input type="hidden" class="image" value="{$vo.image}">
              </div>
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-item">
              <label class="layui-form-label">排序</label>
              <div class="layui-input-inline">
                <input type="number" value="{$vo.sort}" lay-verify="required" autocomplete="off"
                       class="layui-input bsort">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">轮播名称</label>
              <div class="layui-input-block">
                <div class="layui-inline">
                  <input type="text" style="width: 500px" required lay-verify="required" placeholder="请输入轮播标题"
                         autocomplete="off" value="{$vo.name}"
                         class="layui-input name">
                </div>
                {notempty name='$k'}
                <div class="layui-inline">
                  <a class="layui-btn layui-btn-danger del-banner" data-id="{$vo.id}">移除</a>
                </div>
                {/notempty}
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">跳转规则</label>
              <div class="layui-input-block">
                <div class="layui-inline">
                  <input type="text" disabled class="layui-input param" value="{$vo.param}">
                  <input type="hidden" class="type" value="{$vo.type}">
                </div>
                <div class="layui-inline">
                  <a class="layui-btn layui-btn-primary layui-border-green choose-goods" data-type="1">选择普通商品</a>
                </div>
                <div class="layui-inline">
                  <a class="layui-btn layui-btn-primary layui-border-green choose-group-activity" data-type="2">选择拼团活动</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/foreach}
        {/if}
      </div>
      <hr>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <a class="layui-btn layui-btn-primary layui-border-green" id="add-banner">继续添加</a>
          <button class="layui-btn" lay-submit lay-filter="formAdd">保存轮播</button>
        </div>
      </div>

    </form>
  </div>
</div>
<script>
  //Demo
  layui.use(['form', 'upload'], function () {
    var $ = layui.jquery, form = layui.form, upload = layui.upload;

    upload.render({
      elem: '.image_url',
      field: "image",
      url: "/store/upload",
      done: function (res) {
        let  that = this.item;
        if (res.code == 1) {
          that.attr('src', res.src)
          that.parents('.item').find('.image').val(res.src);
        }
      }
    });

    function uploadBanner(){
      $('.image_url').each(function (){
        upload.render({
          elem: $(this),
          field: "image",
          url: "/store/upload",
          done: function (res) {
            let  that = this.item;
            if (res.code == 1) {
              that.attr('src', res.src)
              that.parents('.item').find('.image').val(res.src);
            }
          }
        });
      })
    }



    $('#add-banner').click(function (){
      let item = '<div class="item">' +
              '                    <div class="layui-inline">' +
              '                        <div class="layui-form-item">' +
              '                            <div class="layui-input-block">' +
              '                                <img src="/static/admin/img/upimg.png" class="layui-banner-img image_url">' +
              '                                <input type="hidden" class="image">' +
              '                            </div>' +
              '                        </div>' +
              '                    </div>' +
              '                    <div class="layui-inline">' +
              '                        <div class="layui-form-item">' +
              '                            <label class="layui-form-label">排序</label>' +
              '                            <div class="layui-input-inline">' +
              '                                <input type="number" value="0" lay-verify="required" autocomplete="off"' +
              '                                       class="layui-input bsort">' +
              '                            </div>' +
              '                        </div>' +
              '                        <div class="layui-form-item">' +
              '                            <label class="layui-form-label">轮播名称</label>' +
              '                            <div class="layui-input-block">' +
              '                                <div class="layui-inline">' +
              '                                    <input type="text" style="width: 500px" required lay-verify="required" placeholder="请输入轮播标题"' +
              '                                           autocomplete="off"' +
              '                                           class="layui-input name">' +
              '                                </div>' +
              '                                <div class="layui-inline">' +
              '                                    <a class="layui-btn layui-btn-danger del-banner">移除</a>' +
              '                                </div>' +
              '                            </div>' +
              '                        </div>' +
              '                        <div class="layui-form-item">' +
              '                            <label class="layui-form-label">跳转规则</label>' +
              '                            <div class="layui-input-block">' +
              '                                <div class="layui-inline">' +
              '                                    <input type="text" disabled class="layui-input param">' +
              '                                    <input type="hidden" class="type">'+
              '                                </div>' +
              '                                <div class="layui-inline">' +
              '                                    <a class="layui-btn layui-btn-primary layui-border-green choose-goods" data-type="1">选择普通商品</a>' +
              '                                </div>' +
              '                                <div class="layui-inline">' +
              '                                    <a class="layui-btn layui-btn-primary layui-border-green choose-group-activity" data-type="1">选择拼团活动</a>' +
              '                                </div>' +
              '                            </div>' +
              '                        </div>' +
              '                    </div>' +
              '                </div>';

      $('#banner').append(item);
      uploadBanner();

    });

    $(document).on('click','.del',function(){
      let that = $(this);
      let url = that.attr('data-url');

    });


    $('#banner').on('click','.del-banner',function (){
      let that = $(this);
      let id = that.attr('data-id');
      if (id){
        layer.confirm('您确定要删除吗？', {
          title:['温馨提示'],
          btn: ['确定','取消']
        }, function(){
          $.get('/store/setting/banner/delete?id='+id,function(res){
            if(res.code == 1){
              layer.msg(res.msg,{icon:1});
              that.parents('.item').remove();
              return false;
            }
            layer.msg(res.msg,{icon:2});
          });
        });
      } else {
        that.parents('.item').remove();
      }

    });

    $('#banner').on('click','.choose-goods',function () {
      let that = $(this);
      let type = that.attr('data-type');
      layer.open({
        title: ['选择商品'],
        type: 2,
        area: ['1000px', '800px'],
        offset: '30px',
        btn: ['确定', '取消'],
        maxmin: true,
        content: '/store/goods/option',
        yes: function (index, layero) {
          let el = $(layero).find('iframe').contents().find('input[type="radio"]:checked');
          let id = el.val();
          if (!id) {
            layer.msg('请选择商品!', {icon: 2});
            return false;
          }
          that.parents('.item').find('.param').val(id);
          that.parents('.item').find('.type').val(type);
          parent.layer.close(index);
        }
      });
    });


    $('#banner').on('click','.choose-group-activity',function () {
      let that = $(this);
      let type = that.attr('data-type');
      layer.open({
        title: ['选择拼团活动'],
        type: 2,
        area: ['1200px', '800px'],
        offset: '30px',
        btn: ['确定', '取消'],
        maxmin: true,
        content: '/store/group/activity/option',
        yes: function (index, layero) {
          let el = $(layero).find('iframe').contents().find('input[type="radio"]:checked');
          let id = el.val();
          if (!id) {
            layer.msg('请选择拼团活动!', {icon: 2});
            return false;
          }
          that.parents('.item').find('.param').val(id);
          that.parents('.item').find('.type').val(type);
          parent.layer.close(index);
        }
      });
    });

    function getBannerData()
    {

      let arr = [];

      $('.item').each(function (){
        let data = {};
        let id = $(this).find('.id').val();
        if (id){
          data.id = id;
        } else {
          data.store_id = $('#store-id').val();
        }

        data.sort = $(this).find('.bsort').val();
        data.name = $(this).find('.name').val();
        data.image  = $(this).find('.image').val();
        data.type  = $(this).find('.type').val();
        data.param = $(this).find('.param').val();
        arr.push(data);

      })
      return arr;
    }

    form.on('submit(formAdd)', function () {
      let data = getBannerData();
      $.post('/store/setting/banner',{data},function (res) {
        if (res.code==1){
          return layer.msg(res.msg, {icon: 1});
        }
        return layer.msg(res.msg, {icon: 2});
      });

      return false;
    });

  });
</script>
</body>
</html>